<template>
	<view>
		<view class="v-div">
			<text v-if="item.status=='-1'" class="status">订单过期</text>
			<text v-if="item.status== '0'" class="status">待支付</text>
			<text v-if="item.status== '1'" class="status">待发货</text>
			<text v-if="item.status== '2'" class="status">备货中</text>
			<text v-if="item.status== '3'" class="status">已发货</text>
			<text v-if="item.status== '4'" class="status">已完成</text>
			<text v-if="item.status== '5'" class="status">退款中</text>
			<text v-if="item.status== '6'" class="status">已退款</text>
			<text v-if="item.status== '6'" class="status">订单已取消</text>
		</view>
		<view class="v-di1">
			<view class="title">收货信息</view>
			<view class="content">
				<view class="">
					<text>收货人</text>
					<text class="text2">{{orderInfo.consignee}}</text>
				</view>
				<view class="">
					<text>收货地址</text>
					<text class="text2">{{orderInfo.province}}{{orderInfo.city}}{{orderInfo.area}}{{orderInfo.address}}</text>
				</view>
				<view class="">
					<text>配送方式</text>
					<text class="text2">{{orderInfo.orderType==1?'同城配送':'物流订单'}}</text>
				</view>
			</view>
			<!-- 	<view class="bottom">
				<text>共{{orderInfo.totalNum}}件商品 小计：</text>
				<text class="price">{{orderInfo.totalPrice}}</text>
			</view> -->
		</view>

		<view class="v-di2">
			<view class="title">{{orderInfo.totalNum}}件商品</view>
			<view class="content">
				<view v-for="(item,index) in orderInfo.orderDetailList" :key="index" class="items">
					<image :src="item.image" mode="aspectFit"></image>
					<view class="record">
						<text>{{orderInfo.productName}}</text>
						<text class="price">¥{{orderInfo.price}} × {{orderInfo.num}}</text>
						<text>小计：¥299.4</text>
					</view>
					<view class="bottom">
						<button plain="true" type="default" open-type="contact" size="mini">联系客服</button>
					</view>
				</view>

				<!-- <view class="items">
					<image src="../../static/temp/cate16.jpg" mode="aspectFit"></image>
					<view class="record">
						<text>商品名称商品名称</text>
						<text class="price">¥100.12 × 30</text>
						<text>小计：¥299.4</text>
					</view>
					<view class="bottom">
						<button plain="true" type="default" open-type="contact" size="mini">联系客服</button>
					</view>
				</view> -->
			</view>
		</view>

		<view class="v-di1 v-di3">
			<view class="title">订单信息</view>
			<view class="content">
				<view class="">
					<text>订单编号</text>
					<text class="text2">{{orderInfo.orderCode}}</text>
				</view>
				<view class="">
					<text>下单时间</text>
					<text class="text2">{{orderInfo.createdDate}}</text>
				</view>
				<!-- <view class="">
				<text>商品金额</text>
				<text class="text2">¥{{orderInfo.totalPrice}}</text>
			</view> -->
			</view>
			<view class="bottom">
				<text>合计：</text>
				<text class="price">¥{{orderInfo.totalPrice}}</text>
			</view>
		</view>

		<view class="qging-section">猜你喜欢</view>

		<view class="tjlist">
			<indproitem4 v-for="(item, index) in goodsList" :info="item" :key="index"></indproitem4>
		</view>
	</view>
</template>

<script>
	import indproitem4 from '../../components/ind-pro-item4.vue';
	export default {
		components: {
			indproitem4
		},
		data() {
			return {
				goodsList: [],
				orderInfo: {}
			}
		},
		onLoad(options) {
			this.loadData();
			if (options && options.orderCode) {
				this.getOrderDetail(options.orderCode);
			}
		},
		methods: {
			/*--------------------------点击-----------------------------------------*/
			/*--------------------------函数-----------------------------------------*/
			/**
			 * 获取订单详情
			 */
			getOrderDetail: function(orderCode) {
				let than = this;
				than.$api.myPost({
					url: 'orderDetail',
					data: {
						orderCode: orderCode
					},
					success(res) {
						if (res.status == 'success' && res.orderInfo) {
							than.orderInfo = res.orderInfo;
						}
					}
				})
			},
			/**
			 * 请求静态数据只是为了代码不那么乱
			 * 分次请求未作整合
			 */
			async loadData() {
				let goodsList = await this.$api.json('goodsList');
				this.goodsList = goodsList || [];
			},
		}
	}
</script>

<style lang="scss">
	.tjlist {
		width: 100vw;
		padding: 10rpx 1.5vw;
		margin-bottom: 40rpx;
	}

	.qging-section {
		line-height: 1px;
		text-align: center;
		font-size: 36rpx;
		font-weight: bold;
		color: #fa436a;
		border-left: 19vw solid;
		border-right: 19vw solid;
		margin: 60rpx 14vw;
		width: 72vw;
		float: left;
	}

	page {
		background-color: #F8F8F8;
	}

	.v-div {
		width: 100%;
		height: 300rpx;
		background: linear-gradient(rgba(250, 67, 106, 1), rgba(250, 67, 106, .8));
		border-bottom-left-radius: 30rpx;
		border-bottom-right-radius: 30rpx;

		.status {
			width: 100%;
			text-align: center;
			color: #fff;
			margin-top: 60rpx;
			font-size: 34rpx;
			font-weight: bold;
			float: left;
		}
	}

	.v-di1 {
		width: 94%;
		margin: 0 3%;
		float: left;
		margin-top: -140rpx;
		background-color: #fff;
		border-radius: 12rpx;
		overflow: hidden;

		.title {
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
			padding: 0 30rpx;
			border-bottom: 2rpx solid #E4E7ED;
			font-size: 28rpx;
			color: #303133;
		}

		.content {
			width: 100%;
			padding: 0 30rpx;
			padding-bottom: 20rpx;
			border-bottom: 2rpx solid #E4E7ED;

			view {
				width: 100%;
				display: flex;
				justify-content: space-between;
				font-size: 26rpx;
				color: #909399;
				margin-top: 20rpx;

				.text2 {
					color: #303133;
				}
			}
		}

		.bottom {
			width: 100%;
			padding: 25rpx;
			font-size: 30rpx;
			font-weight: bold;
			text-align: right;
			color: #303133;

			.price {
				color: #FA436A;
			}
		}
	}

	.v-di2 {
		width: 94%;
		margin: 0 3%;
		float: left;
		margin-top: 20rpx;
		background-color: #fff;
		border-radius: 12rpx;
		overflow: hidden;
		padding-bottom: 60rpx;

		.title {
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
			padding: 0 30rpx;
			border-bottom: 2rpx solid #E4E7ED;
			font-size: 28rpx;
			color: #909399;
			text-align: right;
		}

		.content {
			width: 100%;
			float: left;

			.items {
				width: 100%;
				padding: 0 30rpx;
				border-bottom: 2rpx solid #E4E7ED;
				font-size: 28rpx;
				float: left;
				padding-top: 30rpx;

				image {
					width: 150rpx;
					height: 150rpx;
					float: left;
				}

				.record {
					width: calc(100% - 150rpx);
					float: left;
					font-size: 28rpx;
					color: #303133;
					padding-left: 20rpx;

					text {
						width: 100%;
						display: block;
						margin-bottom: 10rpx;
					}

					.price {
						color: #909399;
						font-size: 26rpx;
					}
				}

				.bottom {
					width: 100%;
					float: left;
					text-align: right;
					margin-bottom: 30rpx;
					margin-top: 10rpx;

					button {
						border-radius: 100rpx;
						width: 160rpx;
						height: 60rpx;
						line-height: 56rpx;
						border: 2rpx solid #C0C4CC;
						font-size: 24rpx !important;
						background-color: #F8F8F8;
						color: #909399;
					}
				}
			}
		}
	}

	.v-di3 {
		margin-top: 20rpx !important;
		margin-bottom: 60rpx;
	}
</style>
